{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'account.css' %}">
    <title>Title</title>
</head>

<body>
    <div class="frame">
        <div class="login-box" style="color: white;">
            <ul class="intro">
                <span class="title">云网盘</span>
                <li><ion-icon style="color: grey;" name="arrow-forward-outline"></ion-icon>更大容量</li>
                <li><ion-icon style="color: grey;" name="arrow-forward-outline"></ion-icon>更多选择</li>
                <li><ion-icon style="color: grey;" name="arrow-forward-outline"></ion-icon>在线修改</li>
            </ul>
        </div>
        <div class="login-box">
            <p style="text-transform: uppercase;">{{ mode }}</p>
            <form id="theform">
                {% for field in form %}
                {% if field.name == 'code' %}
                <div class="user-box">
                    <div id="code-box">
                        <span style="flex: 0 0 40%;">
                            {{ field }}
                            <span class="error-prompt"></span>
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        </span>
                        <a id="btnSms" style="flex: 0 0 60%;height: 40px;">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <b>点击获取验证码</b>
                        </a>
                    </div>
                </div>
                {% else %}
                <div class="user-box">
                    {{ field }}
                    <span class="error-prompt"></span>
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                </div>
                {% endif %}
                {% endfor %}
                <span id="global"></span>
                <a id="submit">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    {{ submitLabel }}
                </a>
            </form>

            <p>{{ prompt }}<a href="{{ link.to }}" class="a2">{{ link.label }}</a></p>
            {% if not quick %}
            <p>忘记密码？<a href="/account?mode=quick" class="a2">验证码快速登陆</a></p>
            {% else %}
            <p><a href="/account" class="a2">去登录</a></p>
            {% endif %}
        </div>
        {% csrf_token %}
    </div>
</body>
<script src="{% static 'plugins/jquery-3.7.0/jquery-3.7.0.js' %}"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
    $('#btnSms').click(function () {
        $('#global').empty()
        $('.error-prompt').empty()
        // 获取用户的手机号
        var mobile_phone = $('#id_mobile_phone').val();

        $.ajax({
            url: "{% url 'send_sms'%}",
            type: "GET",
            data: { mobile_phone: mobile_phone, template: '{{ mode }}' },
            dataType: 'JSON',
            success: function (res) {
                //console.log(res)
                if (res.status) {
                    // 启动倒计时功能
                    sendSmsRemind();
                } else {
                    const keys = Object.keys(res.error)
                    for (let i = 0; i < keys.length; i++) {
                        $('#id_' + keys[i]).next().text(res.error[keys[i]])
                    }
                }
            }
        })
    })
    /*
        倒计时功能
    */
    function sendSmsRemind () {
        var $smsBtn = $('#btnSms');
        // 禁用状态
        var time = 60;
        var b = document.querySelector('b');
        var a = document.querySelector('a');
        a.style.pointerEvents = "none";
        var remind = setInterval(function () {
            b.innerHTML = (time + '秒重新发送');
            time -= 1;
            if (time < 1) {
                clearInterval(remind);
                a.style.pointerEvents = "";
                b.innerHTML = ('点击获取验证码');
            }
        }, 1000)
    }
</script>
{% if mode == 'login' or mode == 'quick' %}
<script>
    // login
    $('#submit').click(() => {
        $('#global').empty()
        $('.error-prompt').empty()
        $.ajax({
            url: "{% url 'process' %}",
            method: 'GET',
            data: "mode=" + "{{ mode }}&" + $('form').serialize(),
            success: (res) => {
                console.log(res)
                if (res.status) {
                    alert('登录成功')
                    location.href = res.next
                } else {
                    if (res.error !== undefined) {
                        const keys = Object.keys(res.error)
                        for (let i = 0; i < keys.length; i++) {
                            $('#id_' + keys[i]).next().text(res.error[keys[i]])
                        }
                    } else {
                        $('#global').text(res.msg)
                    }
                }
            }
        })
    })
</script>
{% else %}
<script>
    // register
    $('#submit').click(() => {
        $('#global').empty()
        $('.error-prompt').empty()
        $.ajax({
            url: "{% url 'process' %}",
            method: 'POST',
            data: 'csrfmiddlewaretoken=' + $('[name="csrfmiddlewaretoken"]').val() + '&' + $('form').serialize(),
            success: (res) => {
                if (res.status) {
                    alert('注册成功')
                    location.href = '/account'
                } else {
                    if (res.error !== undefined) {
                        const keys = Object.keys(res.error)
                        for (let i = 0; i < keys.length; i++) {
                            $('#id_' + keys[i]).next().text(res.error[keys[i]])
                        }
                    } else {
                        $('#global').text(res.msg)
                    }
                }
            }
        })
    })
</script>
{% endif %}

</html>